<template>
  <div>
    <button @click="add">点击我加上1</button>
    <button @click="minus">点击我减去1</button>
    <button @click="addEven">点击偶数+1</button>
    <button @click="minusOdd">点击我奇数-1</button>
    <button @click="addHundred">点击我加上100</button>
    <button @click="dealy">点击我过两秒以后减去5</button>
    <h1>计数器数据来自于仓库:{{ $store.state.count }}</h1>
    <h1>getters数据:{{$store.getters.allAge}}</h1>
    <h1>getters数据:{{$store.getters.bigAge}}</h1>
    <hr>
    <h1>{{students}}</h1>
    <h1>{{count}}</h1>
    <h1>{{allAge}}</h1>
    <h1>{{bigAge}}</h1>
    <h1>测试v-model能否与仓库的数据双向绑定---{{msg}}</h1>
    <input type="text" :value="msg" @input="handler">
  </div>
</template>

<script>
//第一个辅助函数:mapState ->vuex提供的
import {mapState,mapGetters} from 'vuex';

//第一件事情:mapState这个函数式vuex提供的，在调用mapState方法时候,需要传递数组、传递对象->返回一个对象
//第二件事情:辅助函数经常结合计算属性一起使用！！！！

//mapGetters:可以把仓库里面计算出的属性与属性值快速映射到VC身上！！！
//mapState:可以把仓库里面的state数据快速映射到VC身上！！！

//VC与仓库关联完毕，身上会拥有一个$store即为仓库
export default {
  name: "",
  methods: {
    //加上1按钮的回调
    add() {
      //VC身上拥有一个$store属性[对象],对象的身上有一个dispatch方法[派发]
      //传递一个参数:第一个参数'经理的名字'
      this.$store.dispatch("addOne");
    },
    //减去1按钮的回调
    minus() {
      this.$store.dispatch("minusOne");
    },
    //偶数加上1
    addEven() {
      this.$store.dispatch("addEven");
    },
    //奇数减去1
    minusOdd() {
      this.$store.dispatch("minusOdd");
    },
    addHundred(){
      //第一个参数:'经理名字'相应actions里面相应函数  第二个参数：是给'经理送的礼物'  //术语：载荷[payload]
      this.$store.dispatch('addHundred',[{num:100}])
    },
    dealy(){
      this.$store.dispatch('delay',5);
    },
    handler(event){
      this.$store.dispatch('changeMsg',event.target.value)
    }
  },
  computed:{
     //数组里面元素字符串:输入的即为仓库state的对象K名字
    ...mapState(['students','count','msg']),
    ...mapGetters(['allAge','bigAge'])
  },
};
</script>

<style scoped>
</style>
